<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %><%--
  Created by IntelliJ IDEA.
  User: 用户
  Date: 2021/11/18
  Time: 10:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<%@include file="loginController.jsp"%>--%>
<html>
<head>
    <title>我的账户</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>
<div class="layui-col-md8 layui-col-md-offset2" style="margin-top: 40px;margin-left: 300px">
    <button class="layui-btn" id="btn_return" style="margin-left: 170px">返回购买页面</button>
    <button class="layui-btn" id="btn_account" style="margin-left: 2px">账单</button>
    <div class="layui-input-inline">
        <select name="storeName" style="width: 100px ;height: 40px">
            <option value="0">请选择商店</option>
        </select>
    </div>
    <button class="layui-btn" id="btn_sell">卖出</button>
<%--    <h2 style="float: right; margin-right: 300px" id="myMoney">我的余额为${money}元</h2>--%>
    <h2 style="float: right; margin-right: 300px" id="myMoney">我的余额为元</h2>
    <div class="layui-col-md5 layui-col-md-offset3" style="margin-top: 40px">
        <table class="layui-hide" id="petList"></table>
    </div>
</div>



<script>
    layui.use(['form', 'layer', 'table'], function () {
        var table = layui.table;
        var form = layui.form;
        //layui中内置了jquery只需要声明$
        var $ = layui.$;
        table.render({
            id: 'petList'
            , elem: '#petList'
            , url: '/ownerPetListServlet'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {type:'numbers',width: 76}
                ,{type: 'checkbox'}
                // , {field: 'id', , title: ''}
                , {field: 'name', width: 100, title: '宠物名称'}
                , {field: 'typename', width: 100, title: '宠物种类'}
                , {field: 'price', width: 100, title: '价格' , sort: true}
            ]]
            , page: true
            , limit: 5
            , limits: [5, 10, 15]
        });


        //把添加下拉列表选项
        $.ajax({
            url: "/getStoreServlet"
            , async: true//是否异步
            , type: "get"
            , dataType: "json"//服务器响应给浏览器的数据格式
            , success: function (list) {
                //把集合元素做成option加到
                for (var i = 0; i < list.length; i++) {
                    // list[i]
                    var $option = $("<option value='" + list[i].storeId + "'>" + list[i].storeName + "</option>");
                    $("select[name=storeName]").append($option)
                }
                form.render();
            }
            , error: function () {
                layer.msg("响应失败")
            }
        });
        //更新余额
        $.ajax({
            url: "/getMoneyServlet"
            , async: true//是否异步
            , type: "get"
            , dataType: "json"//服务器响应给浏览器的数据格式
            , success: function (money) {
                // //把集合元素做成option加到
                // for (var i = 0; i < list.length; i++) {
                //     // list[i]
                //     var $option = $("<option value='" + list[i].storeId + "'>" + list[i].storeName + "</option>");
                //     $("select[name=storeName]").append($option)
                // }

                $("#myMoney").html("我的余额为"+money+"元");
                form.render();
            }
            , error: function () {
                layer.msg("响应失败")
            }
        });



        //点击卖出时获取选中行的数据
        $("#btn_sell").click(function () {
            if( $("select[name=storeName]").val() == 0){
                layer.msg("请选择要卖给哪个商店")
            } else {
                var checkStatus = table.checkStatus('petList'); //idTest 即为基础参数 id 对应的值
                //获取选中行的数据，是一个数组，每一个元素都是一个对象
                //询问框
                layer.confirm('您确定要卖出吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    //向servlet发送数据
                    var pets = checkStatus.data;
                    var petIds = "";
                    var petStoreId = $("select[name=storeName]").val();
                    for (var i in pets) {
                        if (petIds == "") {
                            //第一个选项
                            petIds = pets[i].id
                        } else {
                            //之后的选项
                            petIds = petIds + "," + pets[i].id;
                        }
                        //拼接完成
                    }
                    $.ajax({
                        url: "/sellServlet"
                        , data: {
                            "petIds": petIds
                            ,"petStoreId": petStoreId
                        }
                        , dataType: "text"
                        , type: "get"
                        , async: true
                        , success: function (msg) {

                            //更新余额
                            $.ajax({
                                url: "/getMoneyServlet"
                                , async: true//是否异步
                                , type: "get"
                                , dataType: "json"//服务器响应给浏览器的数据格式
                                , success: function (money) {
                                    // //把集合元素做成option加到
                                    // for (var i = 0; i < list.length; i++) {
                                    //     // list[i]
                                    //     var $option = $("<option value='" + list[i].storeId + "'>" + list[i].storeName + "</option>");
                                    //     $("select[name=storeName]").append($option)
                                    // }

                                    $("#myMoney").html("我的余额为"+money+"元");
                                    form.render();
                                }
                                , error: function () {
                                    layer.msg("响应失败")
                                }
                            });
                            layer.msg(msg);
                            //刷新表格
                            table.reload("petList");
                        }
                        , error: function () {
                            layer.msg("响应失败")
                        }
                    });

                    // window.location.href = "/sellServlet?petStoreId="+petStoreId+"&petIds="+petIds

                })
            }

        });

        //返回购买页面
        $("#btn_return").click(function () {
            window.location.href = "petList.jsp";
        });

        //查看账单
        $("#btn_account").click(function () {
            window.location.href = "accountList.jsp";
        })
    });
</script>
</body>
</html>
